/**
 * Created by JamesZhang on 2017/5/15.
 */
var path = require('path');
var ExtractTextPlain = require("extract-text-webpack-plugin");  // CSS 单独生成一个文件
var HtmlWebpackPlugin = require('html-webpack-plugin');         // 用于动态生成html入口文件的index.html
var CleanWebpackPlugin = require('clean-webpack-plugin');       // 用于打包文件时先清空存放打包文件的目录
var CopyWebpackPlugin = require('copy-webpack-plugin');

var rootPath = path.resolve(__dirname, '.'); // 项目根目录
var staticPath = path.resolve(__dirname, 'static'); // 高度静态文件目录

var src = path.join(rootPath, 'src');  // 开发源码目录
var commonPath = {
    rootPath: rootPath,                 // 项目根目录
    dist: path.join(rootPath, 'build'), // build 后输出目录
    indexHTML: path.join(src, 'index.html'), // 入口html页面
    staticDir: path.join(rootPath, 'static') // 无需处理的静态资源目录
};


module.exports = {
    // devtool: "source-map",   // 生成source-map文件, 方便调试, 一般情况下使用不到, 这里就先注释掉了
    entry: {
        app: path.join(src, 'entry.js'),        // 入口文件一
    },
    output: {
        path: commonPath.dist,         //告诉webpack怎样存储输出结果以及存储到哪里
        filename: "[name].[hash:5].js",             // 打包时生成的文件名
        publicPath: "",              // 被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值
        chunkFilename: 'js/[name]-[id].[chunkhash:5].chunk.js'  // 按需加载时生成的文件名, 注意前面想加路径, 只能加相对路径
        /***
         * chunkFilename用来打包require.ensure方法时引入的模块, 如果该方法中没有引入任何模块则不会生成任何chunk块文件.
         ***/
    },
    module: {
      rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              exclude: /node_modules/,
              // query
              // 标识如何将ES6语法转成ES5以及如何转换React的JSX成js文件
              query: {
                  presets: ['es2015', 'react']
              }
          },
          {
              test: /\.css$/,
              exclude: /node_modules/,
              use: ExtractTextPlain.extract({
                  fallback: 'style-loader',
                  use: 'css-loader'
              })
          },
          {
              test: /\.less$/,
              exclude: /node_modules/,
              use: ExtractTextPlain.extract({
                  fallback: 'style-loader',
                  use: ['css-loader', 'less-loader']
              })
          },
          // {
          //     test: /\.(png|jpg)$/,
          //     exclude: /node_modules/,
          //     loader: "file-loader"
          // },
          { //解析 图片
              test: /\.(png|jpg|jpeg|gif|svg)$/,
              loader: 'url-loader',
              query: {
                  limit: 10000, //10k
                  name: 'images/[name]-[hash:5].[ext]' //图片编译后放置在文件夹images下 [name]图片原名 [hase:5]5位的hash值 [ext]图片原类型
              }
          }
      ]
    },
    /*** 不需要打包的模块 ***/
    // externals: {
    //     "react": 'React',
    //     "react-dom": "ReactDOM",
    //     "zepto": "Zepto"
    // },
    plugins: [
        new ExtractTextPlain('main.[hash:5].css'),        // 打包生成的CSS文件
        // 分开打包成多个CSS文件
        // new ExtractTextPlain({
        //     filename: '[name].[contenthash:8].bundle.css',
        //     allChunks:true,
        // })
        new CopyWebpackPlugin([
            {
                context: staticPath,            // 执行时的上下文目录
                from: "**/*",                   // 需要copy的文件或目录
                to: path.join(commonPath.dist, 'static'),       // copy的目标目录
                ignore: [".md"]         // 忽略的文件
            }
        ]),
        new CleanWebpackPlugin('build', {
            root: commonPath.rootPath,          // 项目的根目录
            verbose: false                    // 是否打印输出的log信息
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',             // 生成的html入口文件
            template: commonPath.indexHTML,     // 使用的模板html文件
        }),
    ],
    devServer: {
        contentBase: path.resolve(__dirname, "./"),     //开发环境下, 必须指向应用根目录(即index.html所在目录).
        port: 8080,               // 开发服务器端口号
        host: '0.0.0.0',
        hot: true,
        inline: true,            // 实时刷新
        compress: true,          // 开启gzip
        // publicPath: '/build/'    // 虚拟目录, 自动指向path编译目录(/asserts/ => /build/js/).
    }
};
